<template>
  <div class="home">
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 列表 -->
    <van-grid :column-num="3" :gutter="10" square>
      <van-grid-item :to="{ path: '/NewsList' }">
        <div class="item">
          <div class="itemIcon" style="background-color: #1fd599">
            <span class="iconfont icon-dingwei"></span>
          </div>
          <span>新闻资讯</span>
        </div>
      </van-grid-item>

      <van-grid-item @click="$router.push({ name: 'ImgList' })">
        <div class="item">
          <div class="itemIcon" style="background-color: #fd3c4f">
            <span class="iconfont icon-tupian"></span>
          </div>
          <span>图片分享</span>
        </div>
      </van-grid-item>

      <van-grid-item :to="{ path: '/GoodsList' }">
        <div class="item">
          <div class="itemIcon" style="background-color: #3f80fe">
            <span class="iconfont icon-gouwuche"></span>
          </div>
          <span>商品展示</span>
        </div>
      </van-grid-item>

      <van-grid-item>
        <div class="item">
          <div class="itemIcon" style="background-color: #2bc2f7">
            <span class="iconfont icon-liuyan"></span>
          </div>
          <span>留言反馈</span>
        </div>
      </van-grid-item>

      <van-grid-item>
        <div class="item">
          <div class="itemIcon" style="background-color: #fd4000">
            <span class="iconfont icon-zixun"></span>
          </div>
          <span>搜索资讯</span>
        </div>
      </van-grid-item>

      <van-grid-item>
        <div class="item">
          <div class="itemIcon" style="background-color: #fe7628">
            <span class="iconfont icon-liebiao"></span>
          </div>
          <span>联系我们</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getlunbolist } from "@/apis/indexCarousel";
export default {
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    let res = await getlunbolist();
    console.log(res);
    this.imgList = res.data.message;
  },
};
</script>

<style lang="less" scoped>
@import url("//at.alicdn.com/t/font_2415375_2ew3a9wgdl5.css");
/deep/ .van-nav-bar__title {
  color: #fff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #fff;
  img {
    width: 100%;
  }
}
/deep/ [class*="van-hairline"]::after {
  border: none;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  .itemIcon {
    width: 50/360 * 100vw;
    height: 50/360 * 100vw;
    border-radius: 50%;
    text-align: center;
    line-height: 50/360 * 100vw;
    color: #fff;
    margin-bottom: 8px;
    span {
      font-size: 25/360 * 100vw;
    }
  }
  span {
    font-size: 14/360 * 100vw;
  }
}
</style>
